$colors: "blue", "green", "yellow", "cyan", "pink", "indigo", "teal", "orange", "bluegray", "purple", "gray" !default;
$colorShades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
$surfaceShades: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
$rgbaShades: 10, 20, 30, 40, 50, 60, 70, 80, 90;

@include surface-class('text', 'color', $surfaceShades);
@include surface-class('surface', 'background-color', $surfaceShades);
@include surface-class('border', 'border-color', $surfaceShades);
@include style-class('background-color', (bg-transparent:'transparent'), true);
@include style-class('border-color', (border-transparent:'transparent'), true);
@include color-class('text-', 'color', $colors, $colorShades);
@include color-class('bg-', 'background-color', $colors, $colorShades);
@include color-class('border-', 'border-color', $colors, $colorShades);
@include rgba-color-class('bg-', 'background-color', ("white": '255,255,255', 'black': '0,0,0'), $rgbaShades);
@include rgba-color-class('border-', 'border-color', ("white": '255,255,255', 'black': '0,0,0'), $rgbaShades);
@include rgba-color-class('text-', 'color', ("white": '255,255,255', 'black': '0,0,0'), $rgbaShades);

.text-primary {
    color: var(--primary-color) !important;
}

.hover\:text-primary:hover {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
}

.hover\:bg-primary:hover {
    background-color: var(--primary-color) !important;
    color: var(--primary-color-text) !important;
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.hover\:border-primary:hover {
    border-color: var(--primary-color) !important;
}

.bg-primary-reverse {
    background-color: var(--primary-color-text) !important;
    color: var(--primary-color) !important;
}

.hover\:bg-primary-reverse:hover {
    background-color: var(--primary-color-text) !important;
    color: var(--primary-color) !important;
}

.text-white {
    color: #ffffff !important; 
}

.hover\:text-white:hover {
    color: #ffffff !important; 
}

.bg-white {
    background-color: #ffffff !important; 
}

.hover\:bg-white:hover {
    background-color: #ffffff !important; 
}

.border-white {
    border-color: #ffffff !important; 
}

.hover\:border-white:hover {
    border-color: #ffffff !important; 
}

.surface-ground {
    background-color: var(--surface-ground) !important; 
}

.surface-section {
    background-color: var(--surface-section) !important; 
}

.surface-card {
    background-color: var(--surface-card) !important; 
}

.surface-overlay {
    background-color: var(--surface-overlay) !important; 
}

.surface-border {
    border-color: var(--surface-border) !important; 
}

.surface-hover {
    background-color: var(--surface-hover) !important;
}